<template>
	<!-- vue content -->
	<view class="ver common-body " style="background: #edf3f1;position: relative">
		<bodyCustom :title="detail.teacherName">
			<view class="pd-lr25 pd-t20">
				<view class="bg-white corner10 pd-lr25 pd-tb25">
					<view class="divider-hor" v-if="index>0"></view>
					<view class="hor ver-center mg-t-20">
						<image :src="detail.teacherPhoto" style="height: 100rpx;width: 100rpx;"
							class="bg-common corner10"></image>
						<view class="mg-l-20">
							<view class="font16 uni-bold font-text-color-black ">{{detail.teacherName}}</view>
							<view class="font16 font-text-color-explain">{{detail.brigadeName}}</view>
						</view>
					</view>
					<view class="font16 font-text-color-black mg-t-20 corner10" v-html="detail.introduce">
					</view>
				</view>
				<view class=" match-width" style="">
					<view style="height: 40rpx;"></view>
					<view class="hor ver-center">
						<image src="../../static/img/ic_calendar.png" style="height: 50rpx;width: 50rpx;">
						</image>
						<view class="mg-l-10 uni-bold font-text-color-black font16">讲师课表</view>
					</view>
					<view class="ver match-width corner20 bg-white mg-t-20 pd-lr25 pd-tb25"
						v-for="(item, index) in allList" :index="index" :key="index" @click="onClickItem(item,index)"
						style="position: relative;">

						<view class="hor ver-center">
							<view class="line2 flex1 uni-bold font16 mg-t-10" style="line-height: 1;">
								{{item.lessonName}}
							</view>
							<view class="bg-common  font-color-white hor hor-center corner10" style="">
								<view class="bg-green  text-center font12 pd-lr25 corner10 pd-tb5" style=";"
									v-if="item.orderStatus==1">
									已预约</view>
								<view class="bg-green   text-center font12 pd-lr25 corner10  pd-tb5" style=""
									v-if="item.orderStatus==2">可预约
								</view>
								<view class="bg-gray   text-center font12 pd-lr25 corner10  pd-tb5" style=""
									v-if="item.orderStatus==3">
									已约满</view>
								<view class="bg-gray   text-center  font12 pd-lr25 corner10  pd-tb5" style=";"
									v-if="item.orderStatus==4">
									已结束
								</view>
							</view>
						</view>

						<view class="bg-common match-width hor ver-center mg-t-40 corner5">
							<view class="flex1 text-center pd-tb10">
								<view class="font-text-color-explain">地区</view>
								<view class="font-text-color-black"> {{item.distinctName}} </view>
							</view>
							<view class="flex1 text-center pd-tb10">
								<view class="font-text-color-explain">开放时间</view>
								<view class="font-text-color-black"> {{item.showTime}} </view>
							</view>
							<view class="flex1 text-center pd-tb10">
								<view class="font-text-color-explain">人数</view>
								<view class="font-text-color-black">{{item.orderQuantity}}/{{item.quantity}}
								</view>
							</view>
						</view>
					</view>


				</view>


				<view class="" style="height: 10vh;"></view>
				<empty-layout id="empty" offsetTop="400rpx" :emptyStatus="emptyStatus" positionMode="1" v-if="emptyShow"
					emptyHint="暂无内容" @retry="onRefresh">
				</empty-layout>
			</view>
		</bodyCustom>
	</view>
</template>

<script>
	let _this
	export default {
		components: {},
		data() {
			return {
				contentHeight: 0,
				contentWidth: 0,
				emptyShow: false,
				emptyStatus: 1,
				emptyHint: "",
				authUser: null,
				auditStatus: 0,
				platform: 0,
				titleHeight: 0,

				teacherId: "",
				detail: {},

				page: 1,
				size: 20,

				allList: [],
				isLoading: false, //是否加载中

			}
		},
		onLoad(option) {
			_this = this;
			this.initUser(option, this, false);
			this.teacherId = option.teacherId

			if (this.teacherId == null) {
				uni.navigateTo({
					url: "/pages/teacher/teacherList"
				})
			}

			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					var windowWidth = res.windowWidth;
					_this.contentHeight = windowHeight;
					_this.contentWidth = windowWidth

					_this.bottomHeight = _this.contentHeight - uni.upx2px(120)
					// console.log(res)

					_this.titleHeight = res.statusBarHeight + uni.upx2px(70)
					// console.log(_this.titleHeight)
				}
			});
			this.onRefresh()

		},
		onUnload() {
			console.log("卸载")
		},
		onShow() {
			this.initUser(null, this, false);

		},
		onPageScroll(res) {
			// console.log("页面滚动了")
			uni.$emit('onPageScroll', res.scrollTop);
		},
		methods: {
			onRefresh() {
				this.page = 1;
				this.getTeacherDetail()
				this.getData();
			},
			getTeacherDetail() {
				let url = ""
				url = "teacher/getByIdFromWx";

				this.sendRequest({
					url: url,
					data: {
						teacherId: this.teacherId,
					},
					method: "GET",
					page: _this,
					success: function(res) {
						_this.detail = res.data
					},
					codeFail: function(e) {
						uni.stopPullDownRefresh();
					},
					fail: function(e) {
						uni.stopPullDownRefresh();
					}
				})
			},

			getData() {
				let url = ""
				url = "lessonOrder/listByTeacherFromWx";

				this.sendRequest({
					url: url,
					data: {
						teacherId: this.teacherId,
						pageNum: this.page,
						pageSize: this.size
					},
					method: "GET",
					page: _this,
					success: function(res) {
						uni.stopPullDownRefresh();
						_this.emptyShow = false;
						_this.isLoading = false;

						const list = res.data.records;

						for (var i = 0; i < list.length; i++) {
							_this.allList.push(list[i])
						}
						// console.log(_this.allList)
					},
					codeFail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					},
					fail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					}
				})
			},
			requestSub() {
				uni.requestSubscribeMessage({
					tmplIds: ['eehBr0bbd7nnLfUFWeKpa6e87Cj50ygw3zgObVKTlPQ',
						'19ORxXNYLqJ7fDc4FWG33ScuqUmpLTkz5CYoPc2ilhU'
					],
					success(res) {


					}
				})
			},
			onClickYuYue(item, index) {
				if (!this.initUser(null, this, true)) {
					return
				}
				if (this.platform == 4) {
					this.requestSub()
				}

				uni.showModal({
					title: '提示',
					content: "是否确认预约地址为：" + item.brigadeName + "(" + item.brigadeAddress + ")",
					confirmText: "预约",
					success: function(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: "orderRecord/wxOrder",
								data: {
									openId: uni.getStorageSync('openid'),
									lessonOrderId: item.lessonOrderId
								},
								method: "POST",
								page: _this,
								success: function(res) {
									uni.showModal({
										title: '提示',
										content: "预约成功",
										confirmText: "我知道了",
										showCancel: false,
										success: function(res) {
											_this.onRefresh()
										}
									});
								},
								fail: function(e) {}
							})
						}

					}
				});

			},
			onClickItem(item, index) {
				uni.navigateTo({
					url: "/pages/lesson/lessonDetail?lessonOrderId=" + item.lessonOrderId
				})
			},
			onClickType(type) {
				this.type = type

				this.page = 1
				this.allList = []
				this.getData();
			}

		}
	}
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #edf3f1;
	}

	.u-fixed-b {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		z-index: 50;
	}

	.body-bg {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(0deg, #e1cdf2, #edeaff, #c2edf5);
		/* 背景尺寸 - 原理3 */
		background-size: 100% 100%;
	}


	.gradient1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #eeb354, #e742c4, #2cd589, #3970d5);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	.gradient2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	/* 动画，控制背景 background-position */
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.gap {
		height: 1px;
		background-color: #f1f1f1;
	}

	.black-gradient-ver {
		background-image: linear-gradient(transparent, #ffffff);
	}

	.bg-gradient-blue1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #2b35ff, #8f95ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #6e25ff, #9361ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue3 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #238dff, #50a5ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}
</style>